<!-- <template>
  <view class="address">
    <custom-nav-bar title="地址管理" showBack></custom-nav-bar>
  </view>
</template>

<script setup>
import { ref } from 'vue'

</script>
<style scoped lang="scss">
.address {
  padding: 20rpx;
  background-color: #f1f1f1;
  min-height: 100vh;
}
</style>
<style></style> -->

<template>
  <view class="address">
    <custom-nav-bar title="地址管理" showBack></custom-nav-bar>
    <radio-group @change="radioChange">
      <view class="address-list">
        <view v-for="(address, index) in addressList" :key="address.id" class="address-item">
          <view class="address-info">
            <view class="left">
              <view class="name">{{ address.company }}</view>
              <view class="con-pho">
                <view class="consignee">{{ address.consignee }}({{ address.sex ? '女士' : '先生' }})</view>
                <view class="phone">{{ address.phone }}</view>
              </view>
            </view>
            <view class="edit-btn" @click="editAddress(address)">
              <!-- <image class="img" src="/static/edit.png" /> -->
              <image class="img" src="/static/icons/edit.png" mode="aspectFill"></image>
            </view>
          </view>

          <view class="default-address" @click="handleBack">
            <label class="uni-list-cell uni-list-cell-pd">
              <view>
                <radio :value="address.id" :checked="!address.isDefault" color="#e74747" />
              </view>
              <view>设置为默认地址</view>
            </label>
          </view>

        </view>
      </view>
    </radio-group>

    <button class="add-address-btn" @click="addAddress">+ 新增收货地址</button>
    <view class="bottom-save-area" :style="{ height: `${bottomSafeArea()}px` }"></view>

  </view>

</template>

<script setup>
import { ref, onMounted, computed, onBeforeUnmount, onUnmounted } from 'vue';
import { bottomSafeArea } from '../../utils/system';
import { apiGet } from '@/api/apis.js';
import { useAddress } from '@/stores/address.js'
import { onLoad } from '@dcloudio/uni-app';


// const showM = ref(false)

// const handleShowModal = () => {
//   showM.value = true
//   // console.log(113123);

// }
// const modalOptions = {
//   title: '提示单位',
//   content: '这是一个模态框',
//   showCancel: '取消',
//   confirmText: '清除',
//   success: function (res) {
//     if (res.confirm) {
//       console.log('用户点击确定');
//     } else if (res.cancel) {
//       console.log('用户点击取消');
//     }

//     // 不论点击确定还是取消，都关闭模态框
//     showM.value = false
//   }
// }







const handleBack = () => {


}





const store = useAddress()





// console.log(new Address(1, '公司', '张三', '12345678901', true));


// 地址列表
const addressList = computed(() => store.addressList)





// 页面卸载时清除地址列表
onUnmounted(() => {

  console.log('页面卸载');
})

// beforeUnmount(() => {
//   console.log('页面卸载');
//   // store.clearAddressList()
// })

// 新增地址
const addAddress = () => {
  uni.navigateTo({
    url: '/pages/addressEdit/addressEdit?action=add'
  });
};

// 编辑地址
const editAddress = (address) => {


  uni.navigateTo({
    url: `/pages/addressEdit/addressEdit?action=edit&id=${address.id}`
  });
};


// 选择地址
const radioChange = (e) => {

  uni.showToast({
    title: '设置默认地址成功',
    icon: 'none'
  })


  // 选择默认地址后，将其存储到本地存储中
  store.replaceAddressList(addressList.value.map(item => {
    item.isDefault = 1;
    return item;
  }))
  const data = addressList.value.find(item => item.id === e.detail.value)
  data.isDefault = 0;
  store.editAddressList(data)

  setTimeout(() => {
    uni.navigateBack()
  }, 500);
};
</script>

<style scoped lang="scss">
.address {
  padding: 20rpx;
  background-color: #f1f1f1;
  min-height: 100vh;
  box-sizing: border-box;

  .address-list {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;


    .address-item {
      background-color: #fff;
      padding: 20rpx;
      border-radius: 20rpx;

      .address-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 10rpx;

        .left {
          display: flex;
          flex-direction: column;
          gap: 20rpx;

          .name {
            font-size: 34rpx;
            font-weight: bold;
          }

          .con-pho {
            display: flex;
            align-items: center;
            gap: 20rpx;
            flex-direction: row;

            .consignee {
              color: #999;
            }

            .phone {
              color: #999;
            }
          }


        }

        .edit-btn {
          color: #1aad19;
          cursor: pointer;

          .img {
            width: 45rpx;
            height: 45rpx;
          }
        }
      }

      .default-address {
        padding: 15rpx 0;
        border-top: 1px solid #ddd;

        .uni-list-cell {
          // padding: 0;
          margin-left: 20rpx;
          display: flex;
          flex-direction: row;
          gap: 10rpx;

        }
      }
    }
  }

  .add-address-btn {
    width: 100%;
    background-color: #e74747;
    color: white;
    // padding: 10px;
    border: none;
    border-radius: 20rpx;
    margin-top: 10px;
  }
}
</style>
